<template>
  <div class="fillcontain">
    <bt-col-header title="任务基础信息"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" ref="nodeForm" label-width="120px">
        <div class="row">
          <!-- <div class="col-md-4">
            <el-form-item label="任务号码" prop="id">
              <el-input
                clearable
                v-model="dataForm.id"
                placeholder="任务号码"
              ></el-input>
            </el-form-item>
          </div> -->
          <div class="col-md-4">
            <el-form-item label="任务编码" prop="taskNo">
              <el-input clearable v-model="dataForm.taskNo" disabled placeholder="任务编码"></el-input>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="需求号码" prop="demandNo">
              <el-input clearable disabled v-model="dataForm.demandNo" placeholder="需求号码"></el-input>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="需求名称" prop="demandNo">
              <el-input clearable disabled v-model="dataForm.demandName" placeholder="需求名称"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <el-form-item label="任务开始时间" prop="taskStartTime">
              <el-date-picker type="datetime" :format="'yyyy-MM-dd HH:mm:ss'" clearable disabled v-model="dataForm.taskStartTime" placeholder="任务开始时间"></el-date-picker>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="任务结束时间" prop="taskEndTime">
              <el-date-picker type="datetime" :format="'yyyy-MM-dd HH:mm:ss'" clearable disabled v-model="dataForm.taskEndTime" placeholder="任务结束时间"></el-date-picker>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="任务优先级" prop="taskLevel">
              <el-select clearable v-model="dataForm.taskLevel" filterable disabled placeholder="请选择">
                <el-option v-for="item in taskLevel" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <el-form-item label="任务状态" prop="status">
              <el-select clearable disabled v-model="dataForm.status" filterable placeholder="请选择">
                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>        
          <div class="col-md-4">
            <el-form-item label="是否修改流程" prop="flawUpdate">
              <el-select clearable disabled v-model="dataForm.flawUpdate" filterable placeholder="请选择">
                <el-option v-for="item in flag" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="是否添加列" prop="addColumn">
              <el-select clearable disabled v-model="dataForm.addColumn" filterable placeholder="请选择">
                <el-option v-for="item in flag" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <el-form-item label="是否存在冲突" prop="isClashStatus">
              <el-select clearable disabled v-model="dataForm.isClashStatus" filterable placeholder="请选择">
                <el-option v-for="item in flag" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="col-md-4">
            <el-form-item label="冲突需求" prop="clashTask">
              <el-input clearable disabled v-model="dataForm.clashTask" placeholder="冲突需求"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <el-form-item label="任务描述" prop="demandDesc">
              <el-input type="textarea" disabled :rows="2" clearable v-model="dataForm.demandDesc" placeholder="任务描述"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>  
    </div>
    
    <bt-col-header title="规则组信息"></bt-col-header>
    <el-table ref="multipleTable" :data="groupInfoList" tooltip-effect="dark" highlight-current-row header-cell-class-name="table-header-class" style="width: 100%">
      <el-table-column property="groupIdentify" label="规则组标识" align="center" show-overflow-tooltip min-width="120">
        <template align="center" slot-scope="scope1">
          <span :class="{ red: scope1.row.clashStatus == '1' }">{{
            scope1.row.groupIdentify
          }}</span>
        </template>
      </el-table-column>
      <el-table-column property="groupName" label="规则组名称" align="center" show-overflow-tooltip min-width="80">
        <template align="center" slot-scope="scope1">
          <span :class="{ red: scope1.row.clashStatus == '1' }">{{
            scope1.row.groupName
          }}</span>
        </template>
      </el-table-column>
      <el-table-column property="groupDesc" label="规则组描述" align="center" show-overflow-tooltip min-width="80">
        <template align="center" slot-scope="scope1">
          <span :class="{ red: scope1.row.clashStatus == '1' }">{{
            scope1.row.groupDesc
          }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        property="changeStauts"
        label="状态"
        align="center"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.changeStauts | stautsFormat }}
        </template>
      </el-table-column> -->

      <el-table-column label="操作" align="center" show-overflow-tooltip min-width="100">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="toogleExpandRule(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <bt-col-header title="流程信息"></bt-col-header>
    <el-table ref="flowTable" :data="flowList" tooltip-effect="dark" highlight-current-row header-cell-class-name="table-header-class" style="width: 100%">
      <el-table-column prop="flowId" header-align="center" align="center" show-overflow-tooltip min-width="80" label="序号">
      </el-table-column>
      <el-table-column prop="flowName" header-align="center" align="center" show-overflow-tooltip min-width="80" label="流程名称">
      </el-table-column>
      <el-table-column prop="flowIdentify" header-align="center" align="center" show-overflow-tooltip min-width="80" label="流程标识">
      </el-table-column>
      <el-table-column prop="remark" header-align="center" align="center" show-overflow-tooltip min-width="80" label="流程说明">
      </el-table-column>
      <!-- <el-table-column
        prop="changeStatus"
        header-align="center"
        align="center"
        show-overflow-tooltip
        min-width="80"
        label="状态"
      >
      <template slot-scope="scope">
          {{ scope.row.changeStatus | stautsFormat }}
        </template>
      </el-table-column> -->
    </el-table>
    <el-dialog title="代码查看" width="80%" :close-on-click-modal="false" :visible.sync="javaCodeVisible">
      <div class="row">
        <div class="col-md-12">
          <div class="temp_content">
            <codemirror ref="mycode" :value="flowJava" v-model="flowJava" :options="cmOptions" class="code">
            </codemirror>
          </div>
          <div class="temp_footer">
            <el-button type="primary" size="small" @click="javaCodeVisible = false">关闭</el-button>
          </div>
          <!--          </el-card>-->
        </div>
      </div>
    </el-dialog>
    <!-- 弹窗, 测试-->
    <test-flow v-if="testFlowVisible" ref="testFlow"></test-flow>
  </div>
</template>

<script>
import { taskDetail } from "@/api/version/version";
import constant from "@/api/constant";
import { getInfo } from "@/api/ruleConfig/flow";
import TestFlow from "../ruleConfig/scene/test-flow";
import { codemirror } from "vue-codemirror";
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

export default {
  name: "App",
  data() {
    return {
      status: constant.status,
      flag: constant.judge,
      taskLevel: constant.taskLevel,
      taskNo: "",
      type: "",
      javaCodeVisible: false,
      testFlowVisible: false,
      dataForm: {
        taskNo: "",
        demandDesc: "",
        demandNo: "",
        taskLevel: "1",
        demandName: "",
        isUpdateFlow: "",
        taskEndTime: "",
        taskStartTime: "",
      },
      groupInfoList: [],
      flowList: [],
      ruleFlow: {
        flowJava: "",
      },
      flowJava: "",

      cmOptions: {
        value: "",
        mode: "x-java",
        theme: "ambiance",
        readOnly: false,
        lineNumbers: true,
      },
    };
  },
  components: {
    codemirror,
    TestFlow,
  },
  props: {
    // flowId: {
    //     type: Number,
    //     default: null
    // }
  },
  created() {
    this.taskNo = this.$route.params.taskNo;
    this.type = this.$route.params.type;
    this.initTask();
  },
  mounted() { },
  methods: {
    // 初始化
    initTask() {
      if (!this.taskNo) {
        return;
      }
      let params = {
        taskNo: this.taskNo,
      };
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      taskDetail(params)
        .then((res) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
          if (res.data.data) {
            this.dataForm = res.data.data;
            if(this.dataForm.flawUpdate == "0") {
              this.dataForm.flawUpdate = "N"
            }else {
              this.dataForm.flawUpdate = "Y"
            }
            let ruleData = res.data.data.ruleGroupInfoList;
            let groupInfoList = []
            ruleData.forEach((e, index) => {
              e.ruleGroupInfo.changeStauts = e.changeStauts
              groupInfoList[index] = e.ruleGroupInfo
            });
            // console.log(this.groupInfoList, "groupInfoList");
            this.groupInfoList = groupInfoList
            this.flowList = res.data.data.ruleFlowVoList;
            // console.log(this.flowList);
            this.initFlag = true;
          }
        })
        .catch((err) => {
          this.$store.dispatch("loading/CHANGE_LOADING", false);
        });
    },
    toogleExpandRule(row) {
      // console.log(row);
      constant.clearTag(this);
      this.$router.push({
        path: `/drools-ruleConfig/group/view/${row.id}/d`, query: { task_no: this.taskNo, viewTask: true }
      });
    },
    updateRuleInfo(row) {
      // console.log(row);
      this.$router.push({
        path: "/drools-ruleConfig/rule/add-or-update/" + row.ruleId + "/ae",
      });
    },
    deleteRuleInfo(row) { },
    // 源码查看
    showJava(row) {
      this.javaCodeVisible = true;
      this.id = row.ruleFlow.flowId;
      let params = {
        flowId: row.ruleFlow.flowId,
      };
      this.ruleFlow = {
        flowJava: "",
      };
      getInfo(params).then((res) => {
        this.ruleFlow = res.data.data.ruleFlow;
        this.flowJava = res.data.data.flowJava;
      });
    },
    editFlow(row) {
      this.$router.push({
        path: "/drools-ruleConfig/flow/edit-flow/" + row.ruleFlow.flowId,
      });
    },
    showResult(id) {
      this.testFlowVisible = true;
      this.$nextTick(() => {
        this.$refs.testFlow.init(id);
      });
    },
  },
  mounted() { },
  filters: {
    statusFormat: function (value) {
      return constant.getLabel(value, constant.status);
    },
    taskLevelFormat: function (value) {
      return constant.getLabel(value, constant.taskLevel);
    },
    flagFormat: function (value) {
      return constant.getLabel(value, constant.flag);
    },
    stautsFormat: function (value) {
      return constant.getLabel(value, constant.ruleConfig.changeStauts);
    },
  },
};
</script>

<style>
.mod-home {
  line-height: 1.5;
}

#mountNode {
  /* width: 620px; */
  margin: 0 auto !important;
  /* height: 835px; */
  position: absolute;
  /* border: 1px saddlebrown solid; */
}

.span-txt {
  display: block;
  /*background-color: #f5f7fa;*/
  /*border-color: #e4e7ed;*/
  color: #c0c4cc;
  text-align: center;
  cursor: pointer;
}

.title {
  background-color: #17b3a3;
  color: #fff;
  padding: 10px;
}

.mt10 {
  margin-top: 10px;
}

/* 提示框的样式 */
.g6-tooltip {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  color: #545454;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px 8px;
  box-shadow: rgb(174, 174, 174) 0px 0px 10px;
}

.flow-img {
  min-height: 937px;
}

.el-tabs--border-card > .el-tabs__content {
  height: 937px;
}

.p10 {
  padding: 10px;
}
/*.code{*/
/*  height:800px;*/
/*}*/
/*.CodeMirror{*/
/*  height:780px !important;*/
/*}*/
/*.CodeMirror-scroll{*/
/*  height:780px !important;*/
/*}*/
.rule_content {
  /*border: 1px solid #606266;*/
  /*border-radius: 5px;*/
  padding: 10px;
  max-height: 200px;
  overflow: auto;
}
.rule_content .txt2 {
  color: #f76565;
  display: inline-block;
}
.rule_content .txt3 {
  color: #10ac8d;
  text-indent: 38px;
  display: inline-block;
}
.rule_content .txt5 {
  color: #10ac8d;
  display: inline-block;
}
.rule_content .txt4 {
  color: #4991da;
  text-indent: 38px;
  display: block;
}
.temp_footer {
  padding: 20px;
  text-align: center;
}
</style>

